
<template>
  <div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$axios.get('api/course/info/',{
        params: {course_name:this.topForm.course_name, course_teacher:this.topForm.teacher_name}
      }).then((response)=>{
        var res = response.data
        if (res['respCode']==='000000'){
          this.allData = res['list']
          console.log(res['list'])
        }else {
          console.log(res['respMsg'])
        }
      })
    },
    methods: {
      getTableData() {
        this.tableData = this.allData.slice(
          (this.page-1) * this.size,
          this.page * this.size
        );
        this.total = this.allData.length
      },
      handleSizeChange(val) {
        this.size = val
        this.getTableData()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.getTableData()
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        page:1,
        total:0,
        size:10,
        allData:[],
      };
    }
  }
</script>

<style scoped>
.el-pagination {
  float: right;
  padding: 10px;
}
</style>
